<template>
	<div>
		<div class="word-container">
			<div class="forts">
				成绩信息统计
				<el-button @click='goBack()' class="back-button">
					返回首页
				</el-button>
			</div>
			<Time class="forts-time" />
		</div>

		<!-- 学号输入框 -->
		<div>
			<el-form ref="form" :model="input" label-width="80px">
				<el-form-item class="cmajor" label="专业">
					<el-input v-model="input.smajor"></el-input>
				</el-form-item>
				<el-form-item class="cgrade" label="年级">
					<el-input v-model="input.cgrade"></el-input>
				</el-form-item>
				<el-form-item class="cterm" label="学期">
					<el-input v-model="input.cterm"></el-input>
				</el-form-item>
				<el-form-item class="button">
					<el-button type="primary" @click="score_static(input)">查询</el-button>
				</el-form-item>
			</el-form>
		</div>


		<div>
			<el-form ref="form2" :model="tableData" label-width="80px">
				<!-- 100~90输出格 -->
				<el-form-item class="table-bar100" label="100~90">
					<el-input v-model="tableData.DataA"></el-input>
				</el-form-item>
				<el-form-item class="table-bar90" label="90~80">
					<el-input v-model="tableData.DataB"></el-input>
				</el-form-item>
				<el-form-item class="table-bar80" label="80~70">
					<el-input v-model="tableData.DataC"></el-input>
				</el-form-item>
				<el-form-item class="table-bar70" label="70~60">
					<el-input v-model="tableData.DataD"></el-input>
				</el-form-item>
				<el-form-item class="table-bar60" label="60~">
					<el-input v-model="tableData.DataE"></el-input>
				</el-form-item>
			</el-form>
		</div>

		<img src="../assets/logo.png" alt="" />
	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import Time from "./Time.vue";
	import {
		defineComponent,
		ref
	} from 'vue';
	export default {
		name: "ScoreStatic",
		components: {
			Time,
			defineComponent,
			ref,
		},
		// 数据
		data() {
			return {
				input: {
					smajor: '',
					cgrade: '',
					cterm: '',
				},
				tableData: {
					DataA: '',
					DataB: '',
					DataC: '',
					DataD: '',
					DataE: '',
				},
			}
		},
		methods: {
			goBack() {
				//直接跳转
				this.$router.push('/main');
			},
			score_static(row) {
				ElMessage.success({
					message: '查询成功',
					type: 'success',
				})
				this.axios.post('http://localhost:8081/statistic/score', {
					smajor: row.smajor,
					cgrade: row.cgrade,
					cterm: row.cterm
				}).then(response => {
					this.tableData = response.data,
						console.log(this.tableData)
				})
			}
		},
	}
</script>

<style>
	.cmajor {
		width: 200px;
		position: absolute;
		left: 15%;
		top: 10%;
	}

	.cgrade {
		width: 200px;
		position: absolute;
		left: 30%;
		top: 10%;
	}

	.cterm {
		width: 200px;
		position: absolute;
		left: 45%;
		top: 10%;
	}


	.table-bar100 {
		position: absolute;
		left: 3%;
		top: 20%;
	}

	.table-bar90 {
		position: absolute;
		left: 23%;
		top: 20%;
	}

	.table-bar80 {
		position: absolute;
		left: 43%;
		top: 20%;
	}

	.table-bar70 {
		position: absolute;
		left: 63%;
		top: 20%;
	}

	.table-bar60 {
		position: absolute;
		left: 83%;
		top: 20%;
	}

	.button {
		position: absolute;
		left: 65%;
		top: 10%;
	}
</style>
